<template>
  <div id="app">
    <div class="content">
      <transition-group name="el-zoom-in-center">
        <div class="card" v-for="(item, index) in list" :key="index"> 
          <div class="left">
            <el-avatar size="medium" :src="'http://www.liujn.top/bbs/api' + item.userAvatar" class="avatar"></el-avatar>
            <p class="floor">#{{ item.floor }}</p>
          </div>
          <div class="right">
            <div class="right-name-text">
              <p class="name">{{ item.name }}</p>
              <p class="text">{{ item.text }}</p>
            </div>
            <div class="time-reply">
              <el-button type="text" @click="open(item.floor, item.name)" class="reply-button">[回复]</el-button>
              <p class="time">{{ changeTime(item.time) }}</p>
            </div>

            <div class="reply" v-for="(reply, index) in item.ann" :key="index">
              <div class="reply-left">
                <el-avatar size="medium" :src="'http://www.liujn.top/bbs/api' + reply.userAvatar" class="avatar"></el-avatar>
              </div>
              <div class="reply-right">
                <div class="reply-right-name-text">
                  <p class="reply-name">{{ reply.name }} <span>回复</span> {{ reply.target }} <span>:</span></p>
                  <p class="reply-text">{{ reply.text }}</p>
                  <div class="time-reply">
                    <el-button type="text" @click="open(item.floor, reply.name)" class="reply-button">[回复]</el-button>
                    <p class="reply-time">{{ changeTime(reply.time) }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  mounted() {
    this.getList()
  },
  methods: { // eslint-disable-next-line
    open(floor, target) {
      if(this.$cookies.isKey("CookieId")) {
        this.$prompt('回复 ' + target + " :", '🎈', {
          confirmButtonText: '回复',
          cancelButtonText: '取消',
          inputType: "text",
          inputPlaceholder: "回复不超过 255 个字",
          inputPattern: /^.{1,255}$/,
          inputErrorMessage: '回复字数在 1 - 255 个字符之间'
        }).then(({ value }) => {
          this.axios.post('http://www.liujn.top/bbs/api/message/Reply', {
            floor: floor,
            name: this.$cookies.get("UserName"),
            text: value,
            target: target,
            userAvatar: this.$cookies.get("UserAvatar")
          }).then((res) => {
            console.log(res.data)
            this.$message({
              type: 'success',
              message: "回复成功！"
            })
            
            this.$parent.getList()
          })
        })
      } else {
        this.$message.error("请先登录！")
      }
    },
    getList() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.7)'
      });
      this.axios.get('http://www.liujn.top/bbs/api/message/seekall').then((res) => {
        loading.close();
        this.list = res.data.reverse()
      })
    },
    changeTime(time) {
      return new Date(+new Date(time)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')
    }
  },
  data() {
    return {
      visible: false,
      userAvatar: "/image/user/moren.png",
      list: []
      // list: [{
      //   floor: 5,
      //   name: "柳江南",
      //   text: "案说法发😎送",
      //   time: "2020-2-2 11:11:11",
      //   userAvatar: "/image/user/moren.png",
      //   ann: [{
      //     floor: 5,
      //     name: "回复测试41241",
      //     text: "124512521412",
      //     target: "柳江南623",
      //     time: "2020-12-03 16:40:24",
      //     userAvatar: "/image/user/moren.png"
      //   }, {
      //     floor: 5,
      //     name: "回复测试523532",
      //     target: "柳江南",
      //     text: "长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长",
      //     time: "2020-12-03 16:40:24",
      //     userAvatar: "/image/user/moren.png"
      //   }, {
      //     floor: 5,
      //     name: "回复测试623",
      //     target: "柳江南",
      //     text: "12451252",
      //     time: "2020-12-03 16:40:24",
      //     userAvatar: "/image/user/moren.png"
      //   }]
      // }, {
      //   floor: 4,
      //   name: "红烧压缩",
      //   text: "案142123说法发送",
      //   time: "2020-2-2 11:11:11",
      //   userAvatar: "/image/user/moren.png"
      // }]
    }
  }
}
</script>

<style scoped>
  .content {
    width: 80%;
    margin: 0px auto 50px auto;
  }

  .card {
    background-color: #fff;
    min-height: 100px;
    display: flex;
    border-bottom: 1px solid #ccc;
  }

  .avatar {
    width: 40px;
    height: 40px;
    margin: 15px 0px auto 10px;
  }

  .floor {
    font-size: 12px;
    color: #777;
    margin-left: 10px;
  }

  .right {
    width: 100%;
    padding: 15px 20px 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }

  .right-name-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .right p {
    margin: 0px;
  }

  .name {
    font-size: 16px;
    color: #3bbcf0;
    font-weight: bold;
  }

  .text {
    text-align: start;
    font-size: 14px;
    padding-bottom: 10px;
  }

  .time {
    font-size: 12px;
    color: #777;
    align-self: flex-end;
    /* padding-right: 20px; */
    
  }

  .reply {
    width: 100%;
    /* background-color: #aaa; */
    /* height: 100px; */
    border-top: 1px solid #ddd;
    margin-top: 15px;
    display: flex;
  }

  .reply-right {
    width: 100%;
    padding: 15px 0px 0px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }

  .reply-right-name-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .reply-name {
    font-size: 14px;
    color: #3bbcf0;
    font-weight: bold;
  }
  .reply-text {
    text-align: start;
    font-size: 14px;
    padding-bottom: 10px;
  }

  .time-reply {
    align-self: flex-end;
    display: flex;

  }
  .reply-button {
    font-size: 12px;
    color: #3bbcf0;
    padding: 0px 20px 0px 0px;
  }
  .reply-time {
    font-size: 12px;
    color: #777;
    align-self: flex-end;
  }

  .reply span {
    color: #777;
  }



  @media screen and (max-width: 768px) {
    .content {
      width: 94%;
      margin: 0px auto 50px auto;
    }
    
    .reply {
      width: 100%;
      border-top: 1px solid #ddd;
      margin-top: 15px;
      display: flex;
    }

    .reply-left {
      display: none;
    }
  }

  
</style>

<style>

  @media screen and (max-width: 768px) {
    .message-width{
      width: 350px;
    }
  }
</style>
